✅画像の高さをheightではなくfont-sizeで指定する (code2svg)
変更点
padding: 1emを削除した
隙間がなくなった
隙間入りは、header optionsを実装するときにつけるつもり
サイズ指定の破壊的変更
今まで
heightとwidthを手動で設定する
はみ出さずかつ余白ができないよう、ちょうどよい値を探る必要があった
ぬくもりあふれる職人芸(白目)takker.icon
今回の変更
fontSizeを新設
defaultでfont-size: 1emになる
何も設定せずとも高さ方向に余白を出さずに表示できる
幅方向は一文字あたりfont-size * 0.55くらいの幅をとると計算して設定している
こちらは場合によってははみ出る可能性があるため、widthで別途指定できるようにした
heightは削除した
blanksを新設
行が折り返されてしまうと、一部表示領域からはみ出してしまう
はみ出した行を表示させるために、手動で追加の余白をblanksで設定できるようにした
追加で確保したい領域を、行数で指定する
<body>と<head>を消し去った
不要だったので
<style>を<svg>の直下に移動した
余計な余白があるかどうかを確かめられる
Firefoxでは無効のようだ
2023-02-19
20:10:39 表示テスト終了
問題なさそう。releaseする
https://code2svg-nduigq38h-takker99.vercel.app/svg/https://raw.githubusercontent.com/takker99/code2svg/main/api/main.ts#.svg https://code2svg-nduigq38h-takker99.vercel.app/svg/L30-40,width=30ch,blanks=5/https://raw.githubusercontent.com/takker99/code2svg/main/api/main.ts#.svg
https://code2svg-nduigq38h-takker99.vercel.app/svg/fontSize=0.5em,blanks=7/https://raw.githubusercontent.com/takker99/aa2svg/main/vercel.json#.svg
https://code2svg-nduigq38h-takker99.vercel.app/svg/https://raw.githubusercontent.com/takker99/aa2svg/main/vercel.json#.svg
https://code2svg-nduigq38h-takker99.vercel.app/svg/width=10em,blanks=10/https://raw.githubusercontent.com/takker99/aa2svg/main/vercel.json#.svg
16:37:00 方針が固まった
heightからfont-sizeを計算する
heightが指定されなかった場合は、font-size: 16pxとして計算する
↓の理由から、折り返された行数を正確に計算できない
表示領域に確保する行数を指定できるようにすればいい？
widthは
font-size * 0.6のように当たりをつけても、微妙にズレが生じる
一応、既定値はfont-size * 0.6の文字列がぴったり収まる幅にする
ch (単位)が使えたら良かったのだが、firefoxが対応していないので断念 firefox
https://gyazo.com/d52ab44d9493a232a020630f5685eb1c
chrome
https://gyazo.com/24d78c4e6ffac6f6b29e9425002db3ea
なぜかchが効いているchromiumのほうがおかしい
https://code2svg.vercel.app/svg/L3-12,width=6em,height=11em/https://raw.githubusercontent.com/takker99/code2svg/31de1a65c53db5f5e27675c0a593240e9092b5fe/src/parseParams.ts#.jpg
https://code2svg.vercel.app/svg/L3-12,width=6ch,height=11ex/https://raw.githubusercontent.com/takker99/code2svg/31de1a65c53db5f5e27675c0a593240e9092b5fe/src/parseParams.ts#.jpg
11exです(強弁)
明らかにおかしいな……どこのfont sizeを参照しているのやら
おそらく埋め込み先サイトのfont sizeを参照していると思われる
内部のCSSにfont-size: inheritを注入するか？
https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/takker/✅画像の高さをheightではなくfont-sizeで指定する_(code2svg)/position.svg
微妙に重なっている
いや、これでいいっぽいな
code:position.svg
<foreignObject width="100%" height="100%">
<style>
body { margin:unset; padding: unset; }
div { background: gray; color: black; font-size: 50px; /*height: 50px;*/ line-height: 1.0; }
</style>
<body>
<div>1行目</div>
<div>2行目</div>
<div>3行目</div>
<div>4行目</div>
</body>
</html>
</foreignObject>
</svg>